import { NavLink } from 'react-router-dom'
import { Input, Select, Space } from "antd"
import LoginAvatar from './LoginAvatar'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

interface IProps {
  handleLogin: () => void;
}

function PageHeader(props: IProps) {
  const navigate = useNavigate();
  const [searchOption, setSearchOption] = useState("issue")

  const onSearch = (value: string) => {
    if (value) {
      // 跳转搜索页
      navigate("/search", {
        state: {
          value,
          searchOption
        }
      })
    } else {
      // 跳转首页
      navigate("/")
    }
  }

  // 下拉列表切换
  const onChange = (val: string) => {
    setSearchOption(val)
  }

  return (
    <div className='headerContainer'>
      {/* 头部logo */}
      <div className="logoContainer">
        <div className="logo"></div>
      </div>
      {/* 头部导航 */}
      <nav className="navContainer">
        <NavLink to="/" className='navigation'>问答</NavLink>
        <NavLink to="/books" className='navigation'>书籍</NavLink>
        <NavLink to="/interviews" className="navigation">面试题</NavLink>
        <a rel='noreferrer' href="https://duyi.ke.qq.com" className='navigation' target='_blank'>视频教程</a>
      </nav>
      {/* 搜索框 */}
      <div >
        <Space.Compact className="searchContainer">
          <Select onChange={onChange} defaultValue="issue" size="large" style={{ width: "20%" }}>
            <Select.Option value="issue">问答</Select.Option>
            <Select.Option value="book">书籍</Select.Option>
          </Select>
          <Input.Search
            placeholder='请输入要搜索的内容'
            allowClear
            enterButton size="large"
            onSearch={onSearch}
            style={{ width: "80%", borderRadius: 0 }}></Input.Search>
        </Space.Compact>
      </div>
      {/* 登录按钮 */}
      <div className="loginBtnContainer">
        {/* 自定义头像组件 */}
        <LoginAvatar handleLogin={props.handleLogin} />
      </div>
    </div>
  )
}

export default PageHeader
